<template>
  <div class="person">
    <h2>姓名：{{ name }}</h2>
    <h2>年龄：{{ age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">年龄+1</button>
    <button @click="showTel">点我查看联系方式</button>
  </div>
</template>

<script>
// 打印顺序setup，beforeCreate，created，beforeMount，mounted
export default {
  name: 'Index',
  // data() {
  //   return {
  //     name: 'zll',
  //     age: 20,
  //   }
  // },
  beforeCreate () {
    console.log('beforeCreate')
  },
  created () {
    console.log('created')
  },
  beforeMount () {
    console.log('beforeMount')
  },
  mounted () {
    console.log('mounted')
  },
  setup () {
    console.log('setup')
    console.log(this) // undefined
    let name = 'zll'
    let age = 20

    function changeName() {
      name = 'zll2' // 页面上的name不会改变，因为不是响应式的
    }
    function changeAge() {
      age += 1 // 页面上的age不会改变，因为aga不是响应式的
    }
    function showTel() {
      alert('18888888888')
    }
    return {name,age,changeName,changeAge,showTel}
  },
  // methods: {
  //   // changeName() {
  //   //   this.name = 'zll2'
  //   // },
  //   // changeAge() {
  //   //   this.age += 1
  //   // },
  //   // showTel() {
  //   //   alert('18888888888')
  //   // },
  // },
}
</script>

<style scoped lang="less">
.person {
  width: 300px;
  height: 300px;
  border: 1px solid #000;
}
</style>
